<template>
  <div class="personal-page">
    <CommonNavigateBar />
    <div class="personal-page__content">
      <div class="personal-page__content-avater">
        <image :src="avatar" class="avater-icon" />
        <span class="avater-nickname">{{ nickname }}</span>
      </div>

      <div className="personal-page__content-panel">
        <CommonField @tap="onNavigatePersionalDetail">
          <template #label>
            <div class="personal-page__content-panel_name">
              <div class="image-wrapped">
                <image src="@/assets/icon/icon-gerenziliao@2x.png" />
              </div>
              <span>个人信息</span>
            </div>
          </template>
        </CommonField>

        <CommonField @tap="onNavigateCollect">
          <template #label>
            <div class="personal-page__content-panel_name">
              <div class="image-wrapped">
                <image src="@/assets/icon/icon-wodeshoucang@2x.png" />
              </div>
              <span>我的收藏</span>
            </div>
          </template>
        </CommonField>

        <CommonField @tap="onNavigateMission">
          <template #label>
            <div class="personal-page__content-panel_name">
              <div class="image-wrapped">
                <image src="@/assets/icon/icon-woderenwu@2x.png" />
              </div>
              <span>我的任务</span>
            </div>
          </template>
        </CommonField>

        <CommonField @tap="onNavigateWenjuan">
          <template #label>
            <div class="personal-page__content-panel_name">
              <div class="image-wrapped">
                <image
                  src="@/assets/icon/icon_wenjuandiaocha@2x.png"
                  class="wenjuan"
                />
              </div>
              <span>问卷调查</span>
            </div>
          </template>
        </CommonField>

        <CommonField @tap="onNavigateContactUs">
          <template #label>
            <div class="personal-page__content-panel_name">
              <div class="image-wrapped">
                <image
                  src="@/assets/icon/icon-lianxiwomen@2x.png"
                  class="contact-us"
                />
              </div>
              <span>联系团队</span>
            </div>
          </template>
        </CommonField>

        <CommonField @tap="onNavigateAbout">
          <template #label>
            <div class="personal-page__content-panel_name">
              <div class="image-wrapped">
                <image
                  src="@/assets/icon/icon-guanyuwomen@2x.png"
                  class="about-us"
                />
              </div>
              <span>关于团队</span>
            </div>
          </template>
        </CommonField>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import CommonNavigateBar from "@/components/common-navigateBar/index.vue";
import CommonField from "@/components/common-field/index.vue";
import "./index.less";
import Taro, { useDidShow } from "@tarojs/taro";
import { useUserInfo } from "@/hooks/useUserInfo";
import { useTabBarSelected } from "@/hooks/useTabBarSelected";
defineOptions({
  name: "personal-page",
});

const { nickname, avatar } = useUserInfo();
const { setSelectIndex } = useTabBarSelected();

useDidShow(() => {
  setSelectIndex(3);
});

const onNavigatePersionalDetail = () => {
  Taro.navigateTo({
    url: `/packageA/pages/persional-detail/index`,
  });
};

const onNavigateContactUs = () => {
  Taro.navigateTo({
    url: "/packageA/pages/contact-us/index",
  });
};

const onNavigateCollect = () => {
  Taro.navigateTo({
    url: "/packageA/pages/my-collect/index",
  });
};

const onNavigateMission = () => {
  Taro.navigateTo({
    url: "/packageA/pages/my-mission/index",
  });
};

const onNavigateAbout = () => {
  Taro.navigateTo({
    url: "/packageA/pages/about/index",
  });
};

const onNavigateWenjuan = () => {
  Taro.navigateTo({
    url: `/packageA/pages/webview/index?title=问卷调查&url=https://www.hicc.info/survey/render/FwdAUjzq?t=1747069193988`,
  });
};
</script>
